<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #divBox {width:800px;height:800px;padding:10px;border:1px solid #aaaaaa;}
        #div1, #div2{width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
        function drag(ev){
            console.log("Text",ev.target.id);
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        function allowDrop(ev){
            console.log("拖到位了还没放下去");
            ev.preventDefault();
        }
        function drop(ev){
            console.log("放下去了");
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>
    <div id="divBox" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <img id="img1" src="../images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
        <img id="img2" src="../images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
    </div>
</body>
</html> -->




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #divBox {width:800px;height:800px;padding:10px;border:1px solid #aaaaaa;}
        #div1, #div2{width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    <script>
        function drag(ev){
            console.log("Text",ev.target.id);
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        function allowDrop(ev){
            console.log("拖到位了还没放下去");
            ev.preventDefault();
        }
        function drop(ev){
            let content1 = document.getElementById("div1").innerHTML;
            let content2 = document.getElementById("div2").innerHTML;
            if(content1 == null || content1.length == 0){
                console.log("放下去了");
                var data=ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
            }else{
                document.getElementById(this).draggable="false";
            }
            if(content2 == null || content2.length == 0){
                var data=ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
            }
        }
    </script>
</head>
<body>
    <div id="divBox" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <img id="img1" src="../images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
        <img id="img2" src="../images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
    </div>
</body>
</html>
